<template>
	<view class="my-message">
		<u--form labelPosition="left" :model="userInfo" ref="uForm">
			<u-form-item label="头像" borderBottom>
				<view class="form-row" style="padding: 28rpx 0rpx;">
					<button open-type="chooseAvatar" class="btnc" @click="showloading" @chooseavatar="chooseavatar">
					</button>
					<image :src="userInfo.avatar" mode="widthFix" style="width: 122rpx;height: 122rpx;border-radius: 50%;">
					</image>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="姓名" prop="name" borderBottom>
				<view class="form-row">
					<u--input type="nickname" placeholder="请输入昵称" @blur="getnickname" v-model="userInfo.nickname"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true;">
				<view class="form-row">
					<u--input v-model="sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="电话" prop="mobile" borderBottom>
				<view class="form-row">
					<u--input readonly placeholder="请输入电话" v-model="userInfo.mobile" border="none"></u--input>
					<button class="custom-style" slot="right" color="#40C6A1" open-type="getPhoneNumber"
						@getphonenumber="getphonenumber">绑定手机号</button>
				</view>
			</u-form-item>
			<u-form-item label="生日" prop="birthday" @click="showBirthday = true;">
				<view class="form-row">
					<u--input v-model="userInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</view>
			</u-form-item>
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
			@confirm="birthdayConfirm" @cancel="showBirthday= false" @close="showBirthday = false"></u-datetime-picker>
		<view class="submit">
			<u-button @click="submit" color="#40C6A1" class="submitBtn">保存</u-button>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	const uploadUrl = config.baseUrl + '/addons/zzyy/api.common/upload'
	import {
		get_user_phone_api,
		save_user_info_api
	} from '@/common/api.js'
	export default {

		data() {
			return {
				showBirthday: false,
				showSex: false,
				sex:'',
				userInfo: {
					avatar: '',
					nickname: '',
					gender: '',
					mobile: '',
					birthday: '',
				},
				actions: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					},
					{
						name: '保密',
						value: 0
					},
				],
			}

		},
		onLoad() {
			this.handleInfo()
		},

		methods: {
			handleInfo() {
				const {
					avatar,
					gender,
					nickname,
					mobile,
					birthday
				} = this.vuex_user

				this.userInfo = {
					avatar,
					gender,
					nickname,
					mobile,
					birthday
				}
				this.sex=['保密', '男', '女'][gender]
			},
			getnickname(e) {
				this.userInfo.nickname = e;
			},
			getphonenumber(res) {
				console.log(res);
				if (res.detail.errMsg == 'getPhoneNumber:fail user deny') {

				} else if ("getPhoneNumber:ok" == res.detail.errMsg) {
					get_user_phone_api({
							encryptedData: res.detail.encryptedData,
							iv: res.detail.iv,
						})
						.then(res => {
							this.userInfo.mobile = res.data.phone
						})
				}
			},
			chooseavatar({
				target: {
					avatarUrl
				}
			}) {
				console.log(avatarUrl);
				uni.uploadFile({
					url: uploadUrl,
					filePath: avatarUrl,
					name: 'file',
					success: (res) => {
						let error = 0;
						if (200 == res.statusCode) {
							let data = JSON.parse(res.data)
							console.log(data);
							if (1 == data.code) {
								this.userInfo.avatar = data.data.fullurl
							} else {
								error = 1
							}
						} else {
							error = 1
						}
						uni.hideLoading()
						if (1 == error) {
							this.$u.toast('头像上传失败');
						}
					}
				});
			},
			sexSelect(e) {
				this.userInfo.gender = e.value
				this.sex=e.name
			},
			// 生日
			birthdayConfirm(e) {
				this.showBirthday = false
				this.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			},
			submit() {
				save_user_info_api(this.userInfo).then(res => {
					if (res.code == 1) {
						this.$u.toast('保存成功')
						this.$u.vuex('vuex_user', {
							...this.vuex_user,
							...res.data
						})
					}
				})
			},
			showloading() {
				uni.showLoading();
				setTimeout(() => {
					uni.hideLoading();
				}, 800)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.my-message {
		box-sizing: border-box;
		padding: 0 24rpx;
		.custom-style {
			width: 212rpx;
			line-height: 58rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			height: 58rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #F3F4F6;
			background-color: #40C6A1;
		}
	}

	.submit {
		position: fixed;
		bottom: 62rpx;
		width: 654rpx;
		left: 50%;
		margin-left: -327rpx;
		background: #40C6A1;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		font-size: 36rpx;
		font-weight: 500;
		color: #F3F4F6;
	}

	.btnc {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		border: none;
		z-index: 55;
		background-color: transparent;
		padding: 0;

		&::after {
			border: none;
		}
	}
	::v-deep .u-form-item__body{
		padding: 0rpx !important;
	}
	.form-row{
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
</style>